<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div class="flex w-full h-full">
    <div v-for="(item, index) in cardList.slice(0, 5)" :key="index" class="rank flex-1 flex flex-col justify-end">
      <div class="flex-1 flex flex-col justify-end items-center" style="color: #fff">
        <div class="mb-2" style="font-size: 20px; color: #2dd4fd">{{ item.name }}</div>
        <div class="mb-2" style="font-size: 20px">{{ item.value }}个</div>
      </div>
      <div
        class="bg"
        :style="{
          height: 300 - index * 20 + 'px',
        }"
      >
        <span
          :style="{
            top: `calc(67% - ${(9 - index) * 4}px)`,
          }"
        >
          {{ index + 1 }}
        </span>
        <svg
          class="icon"
          height="256"
          p-id="9385"
          style="position: relative"
          t="1693211522515"
          version="1.1"
          viewBox="0 0 1024 1024"
          width="256"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M287.762 124.318v252.871c0 123.331 100.905 224.238 224.238 224.238 123.331 0 224.238-100.907 224.238-224.238V124.318H287.762z"
            fill="#82A0AF"
            p-id="9386"
          />
          <path
            d="M379.487 124.318v149.434c0 72.882 59.63 132.513 132.513 132.513 72.882 0 132.513-59.631 132.513-132.513V124.318H379.487z"
            fill="#E0EAED"
            p-id="9387"
          />
          <path
            d="M644.513 124.318v149.434c0 72.882-59.631 132.514-132.513 132.514-72.884 0-132.514-59.631-132.514-132.514V124.318h265.027m19.201-19.201H360.285v168.635c0 83.656 68.059 151.714 151.715 151.714s151.714-68.059 151.714-151.714V105.117z"
            fill="#FFFFFF"
            p-id="9388"
          />
          <path d="M512 622.736m-339.055 0a339.055 339.055 0 1 0 678.11 0 339.055 339.055 0 1 0-678.11 0Z" fill="#9EC2F7" p-id="9389" />
          <path d="M512 622.736m-250.074 0a250.074 250.074 0 1 0 500.148 0 250.074 250.074 0 1 0-500.148 0Z" fill="#DDECF7" p-id="9390" />
          <path
            d="M512 372.662c138.112 0 250.074 111.962 250.074 250.074S650.112 872.81 512 872.81c-138.113 0-250.074-111.962-250.074-250.074S373.888 372.662 512 372.662m0-24.001c-151.126 0-274.075 122.95-274.075 274.075S360.874 896.811 512 896.811s274.075-122.95 274.075-274.076S663.126 348.661 512 348.661z"
            fill="#FFFFFF"
            p-id="9391"
          />
          <path
            d="M786.015 124.319h-548.03c-17.08 0-31.055-13.975-31.055-31.055s13.975-31.055 31.055-31.055h548.029c17.08 0 31.055 13.975 31.055 31.055 0.001 17.08-13.974 31.055-31.054 31.055z"
            fill="#9EC2F7"
            p-id="9392"
          />
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  export default defineComponent({
    name: 'Rank',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        inter: null,
        infoComponent: {},
        cardList: [],
      }
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
            // this.initChart()
          })
        },
        deep: true,
      },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      this.$nextTick(() => {
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      getRequestData() {
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.infoComponent.extension.requestSet.value['resList'].map((item) => {
            this.cardList = this.$getResponseData(res, item)
          })
        })
      },
    },
  })
</script>
<style>
  .rank {
    width: 100%;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .rank {
    padding: 0 10px;
    svg {
      width: 100%;
      height: 100%;
      box-shadow: 0 0 20px 20px #01445e inset;
    }
    .bg {
      width: 100%;
      height: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      border-radius: 0 0 8px 8px;
      span {
        position: absolute;
        font-size: 40px;
        font-weight: bold;

        left: 38.5%;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 2;
        color: #2c60c9;
      }
      &::before {
        content: '';
        display: block;
        border: 50px solid;
        border-color: transparent transparent #01435d transparent;
        box-shadow: none;
        border-top: none;
      }
    }
  }
</style>
